<template>
    <div class="app-container">
        <el-row style="margin-bottom:20px;">
            <el-col :span="24" :xs="24">
                <el-form :model="queryParams"  ref="queryForm" :inline="true"  label-width="90px">
                    <el-form-item label="手机号">
                        <el-input v-model="queryParams.cellphone" placeholder="请输入用户手机号"></el-input>
                    </el-form-item>
                    <el-form-item label="网体级别">
                        <el-select v-model="queryParams.fttLevel">
                            <el-option label="F1" value="F1"></el-option>
                            <el-option label="F2" value="F2"></el-option>
                            <el-option label="F3" value="F3"></el-option>
                            <el-option label="F4" value="F4"></el-option>
                            <el-option label="F5" value="F5"></el-option>
                            <el-option label="F6" value="F6"></el-option>
                            <el-option label="F7" value="F7"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="分红时间">
                        <el-date-picker format='yyyyMMdd' @change="dateFromFormat" v-model="periodDayFrom"  placeholder="分红开始时间"></el-date-picker>至
                        <el-date-picker format='yyyyMMdd' @change="dateToFormat" v-model="periodDayTo"  placeholder="分红结束时间"></el-date-picker>
                    </el-form-item>
                  
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" @click='handleQuery(queryParams)' size="mini" >搜索</el-button>
                        <el-button icon="el-icon-refresh" @click='resetQuery()' size="mini">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <el-row style="margin-bottom:20px;">
            <el-col :span='2'>
                <el-button type="warning" plain icon="el-icon-download" size="mini" :loading="exportLoading" @click="handleExport">导出</el-button>
            </el-col>
        </el-row>
        <Table :list='list' :loading='loading' :tableColumns='tableColumns' ></Table>
        <pagination  v-show="total>0"  :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize" @pagination="getList"  />
    </div>
</template>
<script>

import Table from '@/views/components/myTable'
import { getfttuserprofitsList, fttuserprofitsExport} from '@/api/ka/ka'
export default {
    components:{
        Table
    },
    data() {
        return {
            loading:false,
            exportLoading:false,
            list:[],
            total:0,
            periodDayFrom:"",
            periodDayTo:'',
            queryParams:{
                pageNo: 1,
                pageSize: 10,
            },
            tableColumns:[
                {label:'ID',param:'id'},
                {label:'用户ID',param:'userId'},
                {label:'手机号',param:'cellphone'},
                {label:'网体级别',param:'fttLevel'},
                {label:'分红金额',param:'money'},
                {label:'到账日期',param:'periodDay'},
                {label:'创建时间',param:'createdAt',
                    render: row => {
                        if(!row.createdAt){
                            return '-'
                        }
                        return row.createdAt.replace('T',' ').substring(0,16)
                    }
                },
            ],
        }
    },
    created(){
        this.getList()
    },
    methods:{
        dateHandler(val){
            let d = new Date(val)
            let year = d.getFullYear()+''
            let month = d.getMonth()+1 >= 10 ? ''+ (d.getMonth()+1) : '0' + (d.getMonth()+1) 
            let date = d.getDate() >= 10 ? ''+d.getDate() : '0'+d.getDate()
            return {year,month,date}
        },
        dateFromFormat(val){
            this.queryParams.periodDayFrom = this.dateHandler(val).year+this.dateHandler(val).month+this.dateHandler(val).date
        },
        dateToFormat(val){
            this.queryParams.periodDayTo = this.dateHandler(val).year+this.dateHandler(val).month+this.dateHandler(val).date
        },
        //获取数据
        getList(data){
            data = this.addDateRange(this.queryParams)
            getfttuserprofitsList(data).then(res=>{
                if(res.data.code == 200){
                    this.list = res.data.rows
                    this.total = res.data.total
                }
            })
        },
        //搜索
        handleQuery(obj){
            if(this.periodDayFrom == null){
                this.queryParams.periodDayFrom = ''
            }
            if(this.periodDayTo == null){
                this.queryParams.periodDayTo = ''
            }
            this.searchDelVal(obj)
            this.queryParams.pageNo = 1;
            this.getList()
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.searchReset()
            this.handleQuery();
        },
        //清空搜索条件
        searchReset(){
            this.periodDayFrom = ''
            this.periodDayTo = ''
            this.queryParams.pageNo = 1
            this.queryParams.pageSize = 10
            this.queryParams.periodDayFrom = undefined
            this.queryParams.periodDayTo = undefined
            this.queryParams.cellphone = undefined
            this.queryParams.fttLevel = undefined
        },
        /** 导出按钮操作 */
        handleExport() {
            const queryParams = this.queryParams;
            this.$confirm("是否确认导出所有分红数据项?", "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                this.exportLoading = true;
                return fttuserprofitsExport(queryParams);
            }).then(response => {
                this.download(response.msg);
                this.exportLoading = false;
            }).catch(() => {});
        },
    }
}
</script>
<style scoped>

</style>
